<template>
  <div class="blogInfo-container">
    <el-header :style="'margin-bottom:'+ headerBottom +'px'">
      <h2 class="logo">
        Blog
      </h2>
      <div class="bg-purple-light">
        <el-menu :default-active="activeIndex" router class="el-menu-demo" mode="horizontal" style="border: none;"
                 background-color="rgba(0,0,0,0)" text-color="#fff" active-text-color="#ffd04b">
          <el-menu-item index="/index"><i class="el-icon-s-home" style="color: rgba(255, 255, 255);"></i>首页
          </el-menu-item>
          <el-menu-item :index="item.path" v-for="item in menuList" :key="item.id">
            <!--                图标-->
            <i :class="item.icon" style="color: rgba(255, 255, 255);"></i>
            <!--                文本-->
            {{ item.authName }}
          </el-menu-item>
        </el-menu>
      </div>
      <div class="bg-purple-light el-menu-hidden" v-if="menuHiddenVisiable">
        <el-menu :default-active="activeIndex" router background-color="rgba(84,92,100,0.5)" text-color="#fff"
                 active-text-color="#ffd04b">
          <el-menu-item index="/index" @click="menuAway"><i class="el-icon-s-home"
                                                            style="color: rgba(255, 255, 255);"></i>首页
          </el-menu-item>
          <el-menu-item :index="item.path" v-for="item in menuList" :key="item.id" @click="menuAway">
            <!--                图标-->
            <i :class="item.icon" style="color: rgba(255, 255, 255);"></i>
            <!--                文本-->
            {{ item.authName }}
          </el-menu-item>
        </el-menu>
      </div>

      <div class="menu-expend" @click="menuExpend">
        <i class="el-icon-menu" style="color: rgba(255, 255, 255);"></i>
      </div>

      <div v-if="searchInput" class="search_input">
        <el-input @focus="checkInput" @blur="notSearching" class="search" placeholder="搜索博客"
                  prefix-icon="el-icon-search" v-model="queryInfo.query" size="mini">
        </el-input>
        <ul v-if="searching">
          <li class="animate__animated animate__fadeInDown search-blog" v-for="blog in searchList" :key="blog.id"
              @click="getBlogInfo(blog.id)">
            <a><span v-html="blog.title"></span></a>
          </li>
        </ul>
      </div>

      <div v-if="isLogin" class="bg-purple">
        <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
          <div class="avatar-wrapper">
            <img :src="user.userPic" alt=""
                 style="width: 40px; height: 40px; border-radius: 50%; margin: 0 5px;cursor: pointer">
            <p class="avatar-Name">{{ user.nickname }}</p>
          </div>
          <el-dropdown-menu slot="dropdown">
            <router-link target="_self" to="/space">
              <el-dropdown-item>管理博客</el-dropdown-item>
            </router-link>
            <el-dropdown-item divided @click.native="logout">
              <span>退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>

      <div v-else class="bg-purple">
        <div class="avatar-wrapper">
          <p class="avatar-Name" @click="toLogin">登录|注册</p>
        </div>
      </div>
    </el-header>

    <el-main>
      <el-row :gutter="20">
        <el-col :sm="3" class="hidden-xs-only" style="opacity:0;">左侧占位</el-col>
        <el-col :xs="24" :sm="18">
          <el-card style="background-color: rgba(255, 255, 255,1)" class="first-card">
            <div class="blog-info">
              <div class="user-info">
                <i class="el-icon-user"></i>
                <span class="header">  {{ this.blog[0].nickname }}</span>
              </div>
              <div class="blog-date">
                <i class="el-icon-date"></i>
                <span>{{
                    new Date(this.blog[0].createTime).toLocaleString('zh-CN', {
                      timeZone: 'Asia/Shanghai',
                      hour12: false
                    })
                  }}</span>
              </div>
              <div class="blog-views">
                <i class="el-icon-view"></i>
                <span>  1</span>
              </div>
            </div>

            <h2 class="blog-title header">{{ this.blog[0].title }}
            </h2>
            <div class="typo m-padded-lr-responsive m-padded-tb-large ql-editor" v-html="this.blog[0].content"></div>

            <div class="author">
              <ul>
                <li>作者 {{ this.blog[0].nickname }}</li>
                <li>发表时间 {{
                    new Date(this.blog[0].createTime).toLocaleString('zh-CN', {
                      timeZone: 'Asia/Shanghai',
                      hour12: false
                    })
                  }}
                </li>
              </ul>
              <div style="float: right">
                <div class="control">
                  <span class="like">
                     <span class="like-num" style="margin-left: 5px;">点赞</span>
                  </span>
                </div>
              </div>
            </div>

            <el-card shadow="never" class="comments">

              <div class="header" style="padding-bottom: 10px;">
                评论
                <CommentsBlog/>
              </div>
            </el-card>
          </el-card>
        </el-col>
      </el-row>
    </el-main>

    <el-footer height="40px">
      <BlogFooter/>
    </el-footer>
  </div>
</template>

<script>
import BlogFooter from "@/views/blog/FooterComponents.vue";
import CommentsBlog from "@/views/blog/CommentsIndex.vue";

export default {
  components: {CommentsBlog, BlogFooter},
  data() {
    return {
      blog: JSON.parse(localStorage.getItem('blog-info')),
      headerBottom: 0,
      user: JSON.parse(sessionStorage.getItem("user-key" || "{}")),
      searchInput: true,
      activeIndex: 'this.$router.path',
      menuHiddenVisiable: false,
      searchList: [],
      searching: false,
      isLogin: false,
      menuList: [
        {
          id: 1,
          authName: '评论',
          path: '/blog/comments',
          icon: 'el-icon-chat-dot-round',
        },
      ],
      queryInfo: {
        query: '',
        timer: null
      },
      queryParams: {
        title: null
      }
    }
  },
  watch: {
    'queryInfo.query': {
      handler() {
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          this.searchBlog()
        }, 300)
      }
    }
  },
  created() {
    this.login()
  },
  mounted() {

  },
  methods: {
    login() {
      const userString = sessionStorage.getItem('user-key')
      const user = userString ? JSON.parse(userString) : {}

      this.isLogin = !(user.token == null || user.token === '')
    },
    errorHandler() {
      return true
    },
    toLogin() {
      this.$router.push({
        path: "/login"
      });
    },
    // 展开菜单栏
    menuExpend() {
      this.menuHiddenVisiable = !this.menuHiddenVisiable
      if (this.menuHiddenVisiable === true) {
        this.headerBottom = (this.menuList.length + 1) * 56
      } else {
        this.headerBottom = 0
      }
    },
    //收起菜单
    menuAway() {
      this.menuHiddenVisiable = false;
      this.headerBottom = 0;
    },
    notSearching() {
      setTimeout(() => {
        this.searching = false
      }, 100)
    },
    checkInput() {
      this.searching = this.queryInfo.query !== '';
    },
    // 跳转到博客详情页
    getBlogInfo(blogId) {
      this.$request.get(`/blogs/${blogId}`).then(res => {
        if (res.code === 200) {
          localStorage.setItem('blog-info', JSON.stringify(res.data.blogs))
          this.$router.push('/index/blogInfo')
        }
      })
    },
    handleUpdateSearchList(newList) {
      // 更新父组件的searchList
      this.searchList = newList
    },
    async searchBlog() {
      if (this.queryInfo.query === '') {
        this.searching = false
        return
      }
      this.queryParams.title = this.queryInfo.query
      this.$request.get('/blogs/queryTitle', {params: {title: this.queryParams.title}}).then(res => {
        if (res.code === 200) {
          let lsitSize = res.data.blogs.length;
          if (lsitSize > 0) {
            for (let i = 0; i < lsitSize; i++) {
              let redTitle = this.brightenKeyword(res.data.blogs[i].title, this.queryInfo.query);
              res.data.blogs[i].title = redTitle
            }
          }
          this.searchList = res.data.blogs
          if (this.searchList.length !== 0) {
            this.searching = true
          }
        }
      });
    },
    //搜索关建字标红
    brightenKeyword(val, keyword) {
      const Reg = new RegExp(keyword, 'i');
      let res = '';
      if (val) {
        res = val.replace(Reg, `<span style="color: red;">${keyword}</span>`);
        return res;
      }
    },
    async logout() {
      this.$confirm('确定注销并退出系统登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        location.href = '/index'
        sessionStorage.removeItem('user-key')
      }).catch(() => {
      })
    },
  },
  beforeDestroy() {
    localStorage.removeItem('blog-info')
  }
}
</script>

<style scoped>
.blogInfo-container {
  background-image: url("https://onlineblog.oss-cn-beijing.aliyuncs.com/images/upload/2024-05-13/blog.jpg");
  min-height: 100vh; /* 使容器至少占据整个视口的高度 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 包括 padding 和 border 在内的高度 */
}

.el-header {
  display: flex;
  justify-content: space-between;
  background-color: rgba(0, 0, 0, 0.2);
  align-items: center;
  transition: .2s;
}

.el-header:hover {
  opacity: 1 !important;
}

.el-menu {
  flex-shrink: 0;
  background-color: rgba(0, 0, 0, 0) !important;
}

.first-card {
  border-radius: 10px 10px 10px 10px;
  position: relative;
  padding-bottom: 10px;
  /*text-align: center;*/
  font: 300 1em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;

}

.el-menu /deep/ .el-menu-item {
  background-color: rgba(0, 0, 0, 0) !important;
}


.el-menu /deep/ .el-menu-item i {
  color: rgba(255, 255, 255);
}

.el-menu /deep/ .el-menu-item:hover i {
  color: white;
}

.el-menu /deep/ .el-menu-item:hover {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.search_input {
  position: relative;
  box-sizing: border-box;
}


.search_input ul {
  position: absolute;
  top: 30px;
  width: 100%;
  border: 1px solid #e5e9ef;
  margin-top: 1px;
  background: #fff;
  z-index: 10000;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(58, 118, 142, 0.16);
  padding: 10px 0;
  font-size: 14px;
  box-sizing: border-box;
}

.search_input ul li {
  padding: 0 16px;
  height: 32px;
  line-height: 32px;
  cursor: pointer;
  word-wrap: break-word;
  word-break: break-all;
  display: block;
  color: #222;
  position: relative;
  /*transition: .2 ease;*/
}

.search_input ul li:hover {
  background-color: #e8f3ff;
}


.search-blog {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  padding-left: 20px;
  padding-right: 20px;
}

.bg-purple-light {
  float: right;
}

.bg-purple {
  float: right;
}

.avatar-container {
  margin-right: 30px;
}

.avatar-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.avatar-Name {
  margin-left: 10px;
  cursor: pointer;
  float: right;
  font-size: 16px;
  color: #ffffff;
}

.logo {
  float: left;
  color: #ffd04b;
  font-weight: bold;
}

.logo:hover {
  cursor: pointer;
}

.el-menu-hidden {
  /*display: none;*/
  position: absolute;
  top: 60px;
  left: 0;
  border-top: 1px solid #ccc;
  border-right: none;
  width: 100%;
}

.menu-expend {
  display: none !important;
}

/* 窗口可视区域小于1000隐藏搜索框 */
@media screen and (max-width: 1000px) {
  .search_input {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .el-menu /deep/ .el-menu-item {
    background-color: rgba(0, 0, 0, 0.3) !important;
  }

  .el-menu-demo {
    display: none;
  }

  .menu-expend {
    display: block !important;
    float: right;
  }

  .menu-expend:hover {
    color: #ffd04b;
    cursor: pointer;
  }
}

.blog-info {
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, .4);
  font-size: 13px;
}

.blog-views {
  margin-right: 5px;
  float: right;
}

.user-info {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-right: 15px;
  float: left;
}

.blog-title {
  text-align: center;
}

.header {
  text-decoration: none;
  color: #3a8ee6;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .blog-date {
    display: none;
  }
}

.author {
  text-align: left;
  background-color: #fcfff5;
  box-shadow: 0 0 0 1px #a3c293 inset;
  color: #2c662d;
  width: 100%;
  position: absolute;
  left: 0;
  margin: 20px 0;
  padding: 20px 0;
  font-size: small;
  font-family: PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
}

.comments {
  margin-top: 180px;
  box-shadow: 0 1px 2px 0 rgb(34 36 38 / 15%);
  border: 1px solid rgba(34, 36, 38, .15);
  border-top: 2px solid #409EFF;
  text-align: left;
}

.control {
  font-size: 14px;
  color: #909399;
}
</style>
